<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择座位</title>

<link rel="stylesheet" href="css/icomoon.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/index.css" />
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/icomoon.js"></script>


<script>

$(document).ready(function () {
	$(".bs-glyphicons li").click(function(){
		var cls = $(this).attr("class");
		if(cls == "sold"){
			alert("该座位已经售出！");
		}else if(cls == "selected"){
			$(this).removeClass("selected");
		}else{
			$(this).addClass("selected");
		}
	});
});
</script>

</head>
<body>

	<div class="container"> 
    <div class="navbar navbar-inverse navbar-default" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><h1>VeryEdu 影院订票系统</h1></a>
        </div>
        <div class="navbar-collapse collapse">
          
        </div><!--/.navbar-collapse -->
      </div>
    </div>
    </div>



    <div class="container">			
			<div class="row row-offcanvas row-offcanvas-left">
            	<div class="col-xs-6 col-sm-3 sidebar-offcanvas">
                            
                    <ul class="nav nav-pills nav-stacked">
                      <li><a href="#"><span class="icon-camera"></span><span class="mls"> 浏览影片</span></a></li>
                      <li><a href="#"><span class="icon-bell"></span><span class="mls"> 浏览场次</span></a></li>
                      <li class="active"><a href="#"><span class="icon-users"></span><span class="mls"> 选择座位</span></a></li>                  
                      <li><a href="#"><span class="icon-coin"></span><span class="mls"> 支付订单</span></a></li>                
                      <li><a href="#"><span class="icon-numbered-list"></span><span class="mls"> 查看订单</span></a></li>
                    </ul>
                
                </div>
            	<div class="col-xs-12 col-sm-9">
                	<div class="row">
                		<div class="col-xs-1 col-sm-1"></div>
                    	<div class="col-xs-10 col-sm-10 text-center" style="background-color:#428bca; color:#FFF"><h4>屏幕</h4></div>
                		<div class="col-xs-1 col-sm-1"></div>
                    </div>
                	<div class="row">
                    	<div class="col-xs-12 col-sm-12">&nbsp;</div>
                    </div>
                	<div class="row">
                    	<div class="col-xs-12 col-sm-12 text-center">
                        	<ul class="bs-glyphicons">
                            	<li><span class="icon-user3 font44"></span><p>1��1��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>1��2��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>1��3��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>1��4��</p></li>
                            	<li class="sold"><span class="icon-user3 font44"></span><p>1��5��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>1��6��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>1��7��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>1��8��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>1��9��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>1��10��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>2��1��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>2��2��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>2��3��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>2��4��</p></li>
                            	<li class="sold"><span class="icon-user3 font44"></span><p>1��5��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>2��6��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>2��7��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>2��8��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>2��9��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>2��10��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>3��1��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>3��2��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>3��3��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>3��4��</p></li>
                            	<li class="sold"><span class="icon-user3 font44"></span><p>3��5��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>3��6��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>3��7��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>3��8��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>3��9��</p></li>
                            	<li><span class="icon-user3 font44"></span><p>3��10��</p></li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                    	<div class="col-xs-12 col-sm-12 text-center">
                            <div class="radio-inline">
                              <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked />普通票（65元）</label>
                            </div>                            
                            <div class="radio-inline">
                              <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"/>团体票（30元 ×6）</label>
                            </div>                    
                            <div class="radio-inline">
                              <label>
                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"/>学生票（35元）</label>
                            </div>
                            
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 text-center">
                            <a href="pay.html" class="btn btn-primary" role="button">确认座位</a>
                        </div>
                    </div>
                    <div class="row">
                    	<div class="col-xs-12 col-sm-12">&nbsp;</div>
                    </div>
                    <div class="row">
                    <div class="col-xs-12 col-sm-12 text-center">
                    	<div class="panel panel-default">
                          <div class="panel-heading">说明事项</div>
                          <div class="panel-body text-left">
                            <p>1.红色座位为已经售出座位，不能再选定。</p>
                          </div>
                        </div>
                    </div>
                    </div>
                </div>
		</div>	
		
		
      <hr>
      <footer>
        <p>&copy; Company 2013</p>
      </footer>
    </div> <!-- /container -->


</body>
</html>
